<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script language="javascript">
<!--
  var mouseDown, xdown, ydown;
  function mouseDownOnSpan( event )
  {
    mouseDown = 1;
    var element = $("palette");
    var pos = Position.cumulativeOffset( element );
    xdown = Event.pointerX( event ) - pos[0]; // relative location of mouse's cursor
    ydown = Event.pointerY( event ) - pos[1];
    return false;
  }
  
  function mouseUpOnSpan( event )
  {
    mouseDown=0;
    return true;
  }

  function moveSpan( event )
  {
    if( mouseDown == 1 )
    {
      var element = $("palette");
      element.style.left = Event.pointerX(event) - xdown + "px"
      element.style.top =  Event.pointerY(event) - ydown + "px"
    }
  }

function getStyleObj()
{
  return Try.these
  (
    function()
    { 
      var range = new CRange( $('iframe1').contentWindow );
      return range.getSelectedElement().style; 
    },
    function(){ return null }   
  );
}

function colorSet( color )
{
  Try.these
  (
    function(){ getStyleObj().color = color; }
  )
}
  
function bcolorSet( color )
{
  Try.these
  (
    function(){ getStyleObj().backgroundColor = color; }
  )
}

function fontStyleSet( st )
{
  Try.these
  (
    function(){ getStyleObj().fontStyle = st; }
  )
}

function fontWeightSet( w )
{
  Try.these
  (
    function(){ getStyleObj().fontWeight = w; }
  )
}

function fontSizeSet( size )
{
  Try.these
  (
    function(){ getStyleObj().fontSize = size; }
  )
}

function textStyleSet( s )
{
  Try.these
  (
    function(){ getStyleObj().textDecoration = s; }
  )
}
//-->
</script>
<div class="frame" 
     id="palette"
     >
  <div class="bar">
    <div class="item" style="float: left; font-style: normal"
         onmousedown="mouseDownOnSpan(event);"
         onmouseup="mouseUpOnSpan();"
         onmousemove="moveSpan(event);" 
      >
      &lt;|&gt;
    </div>
    <div class="item" style="float: right; font-style: normal">X</div>
    <div class="item" 
         onmousedown="mouseDownOnSpan(event);"
         onmouseup="mouseUpOnSpan();"
         onmousemove="moveSpan(event);" 
      >
      Style Palette
    </div>
  </div>
  <div class="separator" style="clear: both;">
    C O L O R
  </div>
  <div>
    <div class="pane" style="float:left">
      <div class="title">Foreground</div>
      <div>
        <a class="item" style="background-color: white"
           href="javascript:colorSet('white');">
             <img src="css/a.gif" width="20" height="20" border="0"/>
        </a><a class="item" style="background-color: red" 
              href="javascript:colorSet('red');">[ ]</a>
        <a class="item" style="background-color: green" 
              href="javascript:colorSet('green');">[ ]</a>
        <a class="item" style="background-color: blue" 
              href="javascript:colorSet('blue');">[ ]</a>
        <a class="item" style="background-color: black" 
              href="javascript:colorSet('black');">[ ]</a>
      </div>
    </div>
    <div class="pane" style="float:right;">
      <div class="title">Background</div>
      <a class="item" style="background-color: white"
         href="javascript:bcolorSet('white');">[ ]</a>
      <a class="item" style="background-color: red" 
         href="javascript:bcolorSet('red');">[ ]</a>
      <a class="item" style="background-color: green" 
         href="javascript:bcolorSet('green');">[ ]</a>
      <a class="item" style="background-color: blue "
         href="javascript:bcolorSet('blue');">[ ]</a>
      <a class="item" style="background-color: black"
         href="javascript:bcolorSet('black');">[ ]</a>
    </div>
  </div>
  <div class="separator" style="clear: both;">
    F O N T
  </div>
  <div class="title-left">
    <div class="pane">
      <a class="title">style : </a>
      <a class="item" href="javascript:fontStyleSet('normal');">[normal]</a>
      <a class="item" href="javascript:fontStyleSet('italic');">[italic]</a>
      <a class="item" href="javascript:fontStyleSet('oblique');">[oblique]</a>
      <a class="item" href="javascript:textStyleSet('underline');">[underline]</a>
    </div>
    <div class="pane">
      <a class="title">weight : </a>
      <a class="item" href="javascript:fontWeightSet('normal');">[normal]</a>
      <a class="item" href="javascript:fontWeightSet('bold');">[bold]</a>
    </div>
    <div class="pane">
      <a class="title">size : </a>
      <a class="item" href="javascript:fontSizeSet('8pt');">[8pt]</a>
      <a class="item" href="javascript:fontSizeSet('12pt');">[12pt]</a>
      <a class="item" href="javascript:fontSizeSet('16pt');">[16pt]</a>
    </div>
  </div>
</div>
    